<!DOCTYPE html>
<html>

<head>
  <script src="./lib/angular.min.js"></script>
  <script src="./lib/jquery.min.js"></script>
  <script src="./lib/bootstrap.min.js"></script>
  <script src="./lib/bootstrap-table.min.js"></script>

  <!-- Lovefield -->
  <script src="./lib/lovefield.min.js"></script>

  <!-- CSS -->
  <link rel="stylesheet" href="./lib/bootstrap.min.css">
  <link rel="stylesheet" href="./lib/bootstrap-table.min.css">
  <link rel="stylesheet" href="./resources/demo.css">
</head>

<body ng-app="myApp">
  <div  id="query-builder" ng-controller="QueryBuilderController as queryBuilder">
    <form novalidate>
      <div class="form-group">
        <label for="fromYearSelect">From year:</label>
        <select id="fromYearSelect" class="form-control" ng-model="fromYearSelection">
          <option ng-repeat="year in queryBuilder.fromYears">{{year}}</option>
        </select>
      </div>

      <div class="form-group">
        <label for="toYearSelect">To year:</label>
        <select id="toYearSelect" class="form-control" ng-model="toYearSelection">
          <option ng-repeat="year in queryBuilder.toYears">{{year}}</option>
        </select>
      </div>

      <div class="form-group">
        <label for="citySelect">Hosting city:</label>
        <select id="citySelect" class="form-control" ng-model="citySelection">
          <option ng-repeat="city in queryBuilder.cities">{{city}}</option>
        </select>
      </div>

      <div class="form-group">
        <label for="disciplineSelect">Discipline:</label>
        <select id="disciplineSelect" class="form-control" ng-model="disciplineSelection">
          <option ng-repeat="discipline in queryBuilder.disciplines">{{discipline}}</option>
        </select>
      </div>

      <div class="form-group">
        <label for="eventSelect">Event:</label>
        <select id="eventSelect" class="form-control" ng-model="eventSelection">
          <option ng-repeat="event in queryBuilder.events">{{event}}</option>
        </select>
      </div>

      <div class="form-group">
        <label for="countrySelect">Country:</label>
        <select id="countrySelect" class="form-control" ng-model="countrySelection">
          <option ng-repeat="country in queryBuilder.countries">{{country}}</option>
        </select>
      </div>

      <div class="form-group">
        <label for="colorSelect">Color:</label>
        <select id="colorSelect" class="form-control" ng-model="colorSelection">
          <option ng-repeat="color in queryBuilder.colors">{{color}}</option>
        </select>
      </div>

      <div class="form-group">
        <label>Gender:</label>
        <select ng-model="genderSelection" class="form-control" >
          <option ng-repeat="gender in queryBuilder.genders">{{gender}}</option>
        </select>
      </div>

      <button type="reset" class="btn btn-default" ng-click="queryBuilder.clear()">Clear</button>
      <button type="submit" class="btn btn-primary" ng-click="queryBuilder.search()">Search</button>
    </form>

    <textarea class="form-control" rows="5" readonly ng-model="sqlQuery"></textarea>

  </div>

  <div id="results" ng-controller="ResultsController as resultsController">
    <h1>Found {{resultsController.getResults().length}} results.</h1>
    <table id="results-table"></table>
  </div>


  <script type="text/javascript" src="demo.js"></script>
</body>

</html>
